<template>
  <div>
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="detail">
      <img :src="list.cover" alt="" />
      <p class="price">
        <span class="icon"
          >￥<span class="num">{{ list.price }}</span></span
        >
        <span class="xiao">累计销量12345份</span>
      </p>
      <p class="name">{{ list.name }}</p>
      <p class="stock">剩余{{ list.stock }}份</p>
    </div>
    <div class="bottom">
      <van-goods-action>
        <van-goods-action-icon icon="home-o" text="首页" @click="tohome" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="toshop" />
        <van-goods-action-button
          @click="AddListToCar"
          type="warning"
          text="加入购物车"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState("detail", ["list"]),
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    tohome() {
      this.$router.push("/home");
    },
    toshop() {
      this.$router.push("/shop");
    },
    // 点击添加购物车时执行的函数
    AddListToCar() {},
  },
};
</script>

<style scoped>
.bottom {
  position: fixed;
  bottom: 0;
}
.detail img {
  width: 375px;
}
.price {
  width: 100%;
  height: 60px;
  background-color: rgb(255, 77, 33);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
}
.icon {
  display: inline-block;
  margin-left: 10px;
  padding-top: 10px;
  color: white;
}
.num {
  font-size: 22px;
}
.xiao {
  display: inline-block;
  margin-left: 10px;
  font-size: 10px;
  margin-top: 5px;
  color: rgb(240, 240, 240);
}
.name {
  margin: 10px;
  font-size: 19px;
}
.stock {
  margin-left: 10px;
  color: #a1a1a1;
}
</style>